<template>
    <div class="header-box">

        <div class="nav">
            <div class="nav-list">
                <div class="nav-item" v-for="(item, index) of navList" :key="index">
                    <div @click="navigatorTo" :data-url="item.url">{{ item.name }}</div>
                    <div @click="navigatorTo" :data-url="item.url" class="nav-item-ename">{{ item.ename }}</div>
                </div>
            </div>

            <div class="logo-box">
                WENLIN
            </div>


            <div class="search-box">
                <input class="all-search" type="text" placeholder="搜索">
            </div>

            <div class="meau-box">
                <div class="iconfont icon-ego-menu" @click="meauSwitch"></div>
                <div class="meau-list" v-show="meauShow">
                    <div class="meau-item" v-for="(item, index) of navList" :key="index" @click="navigatorTo"
                        :data-url="item.url">{{ item.name }}</div>
                </div>
            </div>


        </div>
    </div>

</template>


<script>
export default {
    name: 'myHeader',
    data() {
        return {
            meauShow: false,
            navList: [
                { name: '首頁', ename: 'Home', url: '/HomePage' },
                { name: '產品介紹', ename: 'Shop', url: '/Shop' },
                // { name: '肝美靈', ename: 'GanMeiLin', url: '/Gml' },
                // { name: '牛樟芝', ename: 'NiuZhangZhi', url: '/Nzz' },
                { name: '參茸海味', ename: 'FAQs', url: '/FAQs' },
                { name: '聯係我們', ename: 'Contact Us', url: '/ContactUs' },
            ]
        }
    },

    methods: {
        meauSwitch() {

            this.meauShow = !this.meauShow;

            this.$emit('data-meau', this.meauShow);
        },

        navigatorTo(e) {
            this.$router.push(e.target.dataset.url)
        },
    }
}

</script>


<style lang="less" scoped>
.header {
    margin: 0 10vw;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #e9e9e9;

    .header-right {
        display: flex;

        .icon-dianhua {
            font-size: 16px;
            margin-right: 16px;
            font-weight: 700;
        }

        .callUs {
            margin-right: 10px;
        }
    }


}

.nav {
    padding: 0 10vw;
    height: 105px;
    display: flex;
    justify-content: space-around;
    color: #333;

    .search-box {
        margin-top: 32px;

        .all-search {
            height: 40px;
            line-height: 40px;
            padding-left: 10px;
            border: none;
            border-radius: 20px;
            background-color: #eee;
        }
    }

    .meau-box {
        display: none;
    }

    .icon-ego-menu {
        font-size: 32px;
        line-height: 105px;
        width: 30px;
    }

    .meau-list {
        z-index: 9999;
        position: absolute;
        left: 0;
        width: 100%;
        background-color: #f9f9f9;

        .meau-item {
            line-height: 40px;
            font-weight: 700;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            padding: 0 20px;
        }

    }

    .login-box {
        line-height: 105px;
        font-size: 18px;
        font-weight: 700;
    }

    .logo-box {
        padding: 10px 0;
        line-height: 85px;
        font-size: 30px;
        font-weight: 700;

        .logo {
            height: 85px;
        }
    }

    .nav-list {
        display: flex;
        width: 50vw;
        font-size: 15px;

        .nav-item {
            padding: 26px 10px;
            font-weight: 700;
            line-height: 22px;
            text-align: center;
        }

        .nav-item-ename {
            font-size: 13px;
            font-weight: 500;
        }

        .nav-item:hover {
            cursor: pointer;
        }
    }

}

@media (max-width: 768px) {

    .header-left {
        font-size: 12px !important;
    }

    .phone {
        display: none !important;
    }

    .header {
        padding: 0 20px;
    }

    .nav {
        padding: 0 20px;
    }

    .nav-list {
        display: none !important;
    }

    .meau-box {
        display: block !important;
    }
}
</style>